import { useEffect, useRef } from "react";
import { init, graphic } from "echarts";
import classNames from "classnames";

interface Props {
  className?: string;
  title?: string;
  legend: string;
  data: Array<unknown>;
}

export default function NegativeChart(props: Props) {
  const { data, title, legend } = props;
  const domRef = useRef(null);

  const initChart = () => {
    const chart = init(domRef.current, "purple");

    chart.setOption({
      // title: {
      //   text: title
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: data.map(item => item.label),
        top: '30px'
      },
      grid: {
    
        left: '16px',
        right:'16px',
        bottom: '20px',
   
      },
      xAxis: [
        {
          type: 'value'
        }
      ],
      yAxis: {
        show: false,
        data: [legend]
      },
      series: data.map(item => ({
        type: 'bar',
        name: item.label,
        label: {
          show: true,
          formatter: '{a} {c}',
          position: 'insideBottom',
          distance: 15,
          align: 'center',
          verticalAlign: 'middle',
          lineHeight: 30,
        },
        data: [item.value],
        barWidth: 30,
        barMinWidth: 10,
        barMaxWidth: 50,
        itemStyle: {
          borderRadius: [0, 50, 50, 0,]
        },
        barGap: '10%'
      }))

    });
    window.addEventListener("resize", function () {
      chart.resize();
    });
  };

  useEffect(() => {
    initChart();
  }, []);

  const className = classNames("size-full", props.className);

  return <div ref={domRef} className={className}></div>;
}
